.grid {
  padding-top: 20px;
  width: 90%;
  display: flex;

  .demo-box {
    height: auto;
    margin: 10px;
    border: 1px solid #ebebeb;
    border-radius: 3px;
    transition: .2s;
    flex: 1;

    .source {
      padding: 20px 20px 10px 20px;
    }

    .meta {
      background-color: #fafafa;
      border-top: 1px solid #eaeefb;
      overflow: hidden;
      height: auto;
      transition: height .2s;

      .p {
        padding: 20px;
        box-sizing: border-box;
        border: 1px solid #ebebeb;
        border-radius: 3px;
        font-size: 14px;
        line-height: 22px;
        color: #666;
        word-break: break-word;
        margin: 10px;
        background-color: #fff;
      }
    }

    .demo-block-control {
      padding-top: 10px;
      border-top: 1px solid #eaeefb;
      border-bottom: 1px solid #eaeefb;
      height: 44px;
      box-sizing: border-box;
      background-color: #fff;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      text-align: center;
      margin-top: -1px;
      color: #d3dce6;
      cursor: pointer;
      position: relative;

      &:focus,
      &:hover {
        color: #34C3FF;
      }

      ;
    }
  }
}

pre,
code {
  font-family:Menlo,Monaco,Consolas,Courier,monospace;
  background-color: #fafafa;
  font-size: 14px;
  line-height: 1.8;
}

.navatar{
  margin: 5px;
}

@import './button.scss';
@import './input.scss';
@import './tooltip.scss';
@import './tag.scss';
